// 平滑曲线
<template>
  <div class="my-line">
    <MyLine ref="myLine"/>
    <LoadCar class="car" :leftD="leftD"/>
    <el-button @click="stop()">暂停</el-button>
  </div>

</template>

<script>
import LoadCar from '@/components/Chart/LoadCar'
import MyLine from './MyLine'

export default {
  name: '',
  components: {
    LoadCar,
    MyLine
  },
  data() {
    return {
      interval: null, // 计时器
      leftD: -1280, // 小车距离左侧距离
      run: true, // 控制小车是否运行
      step: 2, // 小车每次的位移距离
      timeStep: 10, // 运动时间间隔
      stopCir: 100, // 到节点位置的停顿轮回数
      nowCir: 0, // 保存当前的轮回数
      leftDistanceList: [
        -1280,
        -980,
        -780,
        -580,
        -380,
        -180,
        -80

      ],
    }
  },
  computed: {},
  props: {},

  methods: {
    // 开始计时器
    initInterval() {
      var _this = this
      if (this.interval == null) {
        this.interval = setInterval(function () {
          if (_this.run) {
            // 到关键节点停顿
            if (_this.leftDistanceList.indexOf(_this.leftD) != -1) {
              _this.nowCir += 1;
              if (_this.nowCir >= _this.stopCir) {
                _this.nowCir = 0
                _this.setLine()
              } else {
                return;
              }
            }
            _this.leftD += _this.step


            // 返回起点
            if (_this.leftD > -80) {
              _this.leftD = -1280
            }
          }

        }, _this.timeStep)
      }
    },
    stop() {
      this.run = !this.run
    },
    // 设置直线
    setLine() {
      var tem = [200, 1200, 1400, 1800, 2200]
      var length = this.leftDistanceList.indexOf(this.leftD) + 1
      console.log("change ")
      console.log(length)
      this.$refs.myLine.setDataAndRedraw(tem.slice(0, length))
      // this.$refs.myLine.setDataAndRedraw([])
    }
  },
  beforeDestroy() {
    clearInterval(this.interval)
  },
  mounted() {
    this.initInterval()
  },
  watch: {}
}
</script>

<style lang="less" scoped>
.my-line {
  //position:relative;
  border: 2px solid #fff;
}

.car {
  scale: 0.4;
  position: absoulte;
  bottom: 20px;
  right: 20px;
  z-index: 999;
}
</style>
